import { Button, Toast, Mask, Card, List, ProgressBar } from 'antd-mobile'
import styles from '../css/order.module.css'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { useContext, useMemo, useState, useEffect, useRef } from 'react'
import { FormContext } from '../formCtx'
import { CheckCircleOutline } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import { createOrderApi } from '../../../api/order'
import { setPsgArr } from '../../../store/slice/orderSlice'

function OrderFooter(props) {
  const dispatch = useDispatch()
  const nav = useNavigate()
  const form = useContext(FormContext)
  const [sp] = useSearchParams()
  // 乘客的数量
  const count = useSelector((store) => store.order.psgArr.length)
  // 从仓库中，把乘客列表取出来
  const psgArr = useSelector((store) => store.order.psgArr)
  // 从仓库中，把所有的座位选择出来
  const seatArr = useSelector((store) => store.order.seatArr)
  const [visible, setVisible] = useState(false)
  // 进度条的百分比的数值
  const [percent, setPercent] = useState(0)
  const timerRef = useRef(null)

  //#region 计算总价格
  // 使用 useMemo 对计算的结果进行缓存
  // const 计算的结果 = useMemo(fn, [依赖项])
  // const 计算的结果 = useMemo(() => 一般右侧不需要写大括号, [依赖项])
  // const 计算的结果 = useMemo(() => 单价 * 数量, [依赖项])
  // const 计算的结果 = useMemo(() => 单价 * 数量, [单价, 数量])
  const amount = useMemo(() => sp.get('price') * count, [sp, count])
  //#endregion

  // 点击了提交订单的按钮
  const postOrder = async () => {
    try {
      // 1. 根据 form 进行表单的校验
      // 这里解构出来的 contacts 就是要提交到服务器的乘车人的列表数据
      const { contacts } = await form.validateFields()
      console.log(contacts)
      dispatch(setPsgArr(contacts))
      // 2. 校验选座的数量是否等于乘客的数量
      if (seatArr.length !== count) return Toast.show('请选择座位！')
      // 3. 展示占座中的弹出层
      showMask()
    } catch (error) {
      console.log('报错了，执行了 catch 中的代码', error)
      if (error.errorFields) {
        // 提示乘车人信息不能为空
        Toast.show('请完善乘车人的信息！')
      }
    }
  }

  // 展示弹出层
  const showMask = () => {
    setVisible(true)

    // 开启定时器让进度条自增
    timerRef.current = setInterval(() => {
      setPercent((prev) => prev + 10)
    }, 100)
  }

  useEffect(() => {
    if (percent >= 100) {
      // 清掉定时器
      clearInterval(timerRef.current)
      // TODO: 封装下单的接口，调用下单的接口，跳转到订单支付页面
      // 准备接口的参数
      const obj = {
        train_id: props.id,
        start: props.startStation,
        end: props.endStation,
        date: sp.get('date'),
        seats: seatArr,
        seatType: sp.get('seatType'),
        passengers: form.getFieldValue('contacts')
      }
      console.log(obj)

      async function postOrder() {
        const { data: orderInfo } = await createOrderApi(obj)
        console.log(orderInfo)
        nav('/order-pay', { state: orderInfo })
      }

      postOrder()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [percent])

  return (
    <div className={styles.footerBox}>
      <span className={styles.left}>
        <span className={styles.price}>&yen;{amount}</span>
        <span className={styles.desc}>支付金额</span>
      </span>

      <Button
        color="primary"
        disabled={amount === 0}
        onClick={postOrder}
      >
        提交订单
      </Button>

      {/* 弹出层 */}
      <Mask visible={visible}>
        <div className={styles.overlayContent}>
          <Card>
            {/* 列表区域 */}
            <List style={{ '--border-top': 'none', '--border-inner': 'none' }}>
              <List.Item
                description={
                  <span className={styles.desc}>
                    {props.startStation}-{props.endStation} {props.trainNo}
                  </span>
                }
                extra={
                  <CheckCircleOutline
                    color="#15A5C9"
                    fontSize={24}
                  />
                }
              >
                <span className={styles.title}>请确认车次信息</span>
              </List.Item>

              <List.Item
                description={
                  <span className={styles.desc}>
                    {dayjs(sp.get('date')).format('MM-DD ddd')}{' '}
                    {props.startTime}
                  </span>
                }
                extra={
                  <CheckCircleOutline
                    color="#15A5C9"
                    fontSize={24}
                  />
                }
              >
                <span className={styles.title}>出发时间</span>
              </List.Item>

              <List.Item
                description={
                  <span className={styles.desc}>
                    {psgArr.map((item) => item.name).join(', ')}
                  </span>
                }
                extra={
                  <CheckCircleOutline
                    color="#15A5C9"
                    fontSize={24}
                  />
                }
              >
                <span className={styles.title}>乘车人</span>
              </List.Item>
            </List>
            {/* 底部进度条区域 */}

            <div className={styles.footer}>
              {/* 信息 */}
              <div className={styles.infoBox}>
                <span>核验乘客信息成功，占座中···</span>
                <span className={styles.percent}>{percent}%</span>
              </div>
              {/* 进度条 */}
              <ProgressBar percent={percent} />
            </div>
          </Card>
        </div>
      </Mask>
    </div>
  )
}

export default OrderFooter
